<div class="span-18">
<table id="list2"></table> <div id="pager2"></div> 

<div class="demo">
<!--<form>-->
<button>Add New Movie</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
<!--</form>-->
</div><!-- End demo --> 
</div>
<div class="span-4 last">
    <div id="accordion">
	<h3><a href="#">Action</a></h3>
        <div>
            <div class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plusthick" style="float: left;"></span><div style="padding-bottom: 2px;">Add</div></div>
            <div class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-pencil" style="float: left;"></span><div style="padding-bottom: 2px;">Update</div></div>
        </div>
    </div>
    
    <div id="accordion2" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-triangle-1-e"></span>
            <a href="#">Action</a>
        </h3>
    </div>
</div>
<div class="clear"></div>
test
<div id="sidemenu"></div>
<br />
<!--<script src="http://gmodules.com/ig/ifr?url=http://feeds.labnol.org/labnol&amp;synd=open&amp;w=320&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>-->
<script>
$(document).ready(function(){
    $("#sidemenu").slidemenu({
        title:'Menus',
        menu:[
            {label:'Add Movie',icon:'ui-icon-plusthick',link:'',htmlOptions:{'width':'a','class':''}},
            {label:'Update Movie',icon:'ui-icon-pencil',link:''},
            {label:'Delete Movie',icon:'ui-icon-trash',link:''}
        ],
        htmlOptions:{style:'width:100px'}
    });
    
    
    $('#accordion').accordion({ collapsible: true,active: false,autoHeight:true});
    
    
    var url = '<?php echo Mirage\Web::app()->createUrl('movie')  ?>';
    jQuery("#list2").jqGrid({ 
//        url:'server.php?q=2', 
        url: url, 
        datatype: "json", 
        colNames:[
            'ID',
            'Movie Title',
//            'Date',
//            'Client', 
//            'Amount',
//            'Tax',
//            'Total',
//            'Notes'
        ], 
        colModel:[ 
            {name:'id',index:'id',width:'10%'}, 
            {name:'movietitle',index:'id',width:'90%'}, 
//            {name:'invdate',index:'invdate', width:90}, 
//            {name:'name',index:'name asc, invdate', width:100},
//            {name:'amount',index:'amount', width:80, align:"right"}, 
//            {name:'tax',index:'tax', width:80, align:"right"}, 
//            {name:'total',index:'total', width:80,align:"right"}, 
//            {name:'note',index:'note', width:150, sortable:false} 
        ], 
        rowNum:<?php echo \Mirage\Base\Config::app()->param['initialLimit'] ?>, 
        rowList:<?php echo \Mirage\Base\Config::app()->param['limit'] ?>, 
        pager: '#pager2', 
        width:708,
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc", 
        caption:"Movie List" }); 
    jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); 
    
//    $('#btnAdd').button({icons: {primary: "ui-icon-plusthick"}});
    
    
        $( ".demo button:first" ).button({
            icons: {
                primary: "ui-icon-plusthick"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-locked"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-gear",
                secondary: "ui-icon-triangle-1-s"
            }
        }).next().button({
            icons: {
                primary: "ui-icon-gear",
                secondary: "ui-icon-triangle-1-s"
            },
            text: false
        });

})
</script>